import { MeshPhongMaterial } from "three";
import { Box3 } from "three";
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  Color,
  Fog,
  PointLight,
  AxesHelper,
  DirectionalLight,
  FontLoader,
  TextGeometry,
  PlaneBufferGeometry,
  DoubleSide,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let mesh: Mesh;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 400;

  scene = new Scene();
  scene.background = new Color("#000");
  // scene.fog = new Fog("#000", 250, 1400);

  //   lights
  let pointLight = new PointLight("#fff", 1.5);
  pointLight.position.set(200, 50, 1000);
  scene.add(pointLight);
  let pointLight1 = new PointLight("#fff", 1.5);
  pointLight1.position.set(200, 50, -1000);
  scene.add(pointLight1);

  let directionalLight = new DirectionalLight("#fff", 0.25);
  directionalLight.position.set(-200, 50, 10000).normalize();
  scene.add(directionalLight);

  let materials = [
    new MeshPhongMaterial({ color: "#f00", flatShading: true }), // front
    new MeshPhongMaterial({ color: "#222" }), // side
  ];

  //   axes
  let axes = new AxesHelper(1000);
  scene.add(axes);

  let planeGeometry = new PlaneBufferGeometry(10000, 10000);
  let planeMesh = new Mesh(
    planeGeometry,
    new MeshBasicMaterial({
      color: "#fff",
      opacity: 0.5,
      side: DoubleSide,
      transparent: true,
    })
  );
  planeMesh.position.y = 0;
  planeMesh.rotateX(-Math.PI / 2);
  scene.add(planeMesh);

  //   fonts
  let fontLoader = new FontLoader();

  fontLoader.load(
    "./static/fonts/optimer_regular.typeface.json",
    // onLoad callback
    function (font) {
      let textGeometry = new TextGeometry("HELLO", {
        font: font,
      });
      let mesh = new Mesh(textGeometry, materials);
      // mesh.translateY(20)
      scene.add(mesh);

      let textGeometry1 = new TextGeometry("HELLO", {
        font: font,
      });
      console.log(textGeometry1.center());
      let mesh1 = new Mesh(textGeometry1, materials);
      mesh1.translateY(-150);
      var box = new Box3().setFromObject(mesh);
      // box.center(mesh.position); // this re-sets the mesh position
      mesh1.rotateZ(Math.PI / 2);
      scene.add(mesh1);
    },
    // onProgress callback
    function (xhr) {
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // onError callback
    function (err) {
      console.log("An error happened");
      console.log(err);
    }
  );

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  let controls = new OrbitControls(camera, renderer.domElement);
  // renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}
